<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>现病史记录表单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            color: #333;
            font-size: 14px;
            line-height: 1.5;
            max-width: 750px;
            margin: 0 auto;
            padding: 10px;
        }
        
        .form-container {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 15px;
            margin-bottom: 20px;
        }
        
        h1 {
            font-size: 18px;
            text-align: center;
            margin-bottom: 15px;
            color: #2c80ff;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        
        h2 {
            font-size: 16px;
            margin: 15px 0 10px;
            color: #333;
        }
        
        .required::after {
            content: "★";
            color: #ff4757;
            margin-left: 3px;
        }
        
        .section {
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px dashed #eee;
        }
        
        .form-group {
            margin-bottom: 12px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
        }
        
        input[type="text"],
        input[type="number"],
        input[type="date"],
        input[type="time"],
        select,
        textarea {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            background-color: #fff;
        }
        
        input:focus,
        select:focus,
        textarea:focus {
            border-color: #2c80ff;
            outline: none;
        }
        
        .checkbox-group,
        .radio-group {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 5px;
        }
        
        .checkbox-item,
        .radio-item {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
        }
        
        .checkbox-item input,
        .radio-item input {
            margin-right: 6px;
        }
        
        .inline-input {
            display: inline-block;
            width: auto;
            margin: 0 5px;
        }
        
        .add-btn {
            background-color: #2c80ff;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 8px 15px;
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            margin-top: 10px;
        }
        
        .add-btn:hover {
            background-color: #1a6fe0;
        }
        
        .add-btn::before {
            content: "+";
            margin-right: 5px;
            font-weight: bold;
        }
        
        .remove-btn {
            background-color: #ff4757;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 5px 10px;
            font-size: 12px;
            cursor: pointer;
            margin-left: 10px;
        }
        
        .symptom-item {
            background-color: #f9f9f9;
            padding: 12px;
            border-radius: 4px;
            margin-bottom: 10px;
            position: relative;
        }
        
        .submit-btn {
            background-color: #2c80ff;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 12px 20px;
            font-size: 16px;
            cursor: pointer;
            width: 100%;
            margin-top: 20px;
        }
        
        .submit-btn:hover {
            background-color: #1a6fe0;
        }
        
        .progress-bar {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            position: relative;
        }
        
        .progress-bar::before {
            content: "";
            position: absolute;
            top: 15px;
            left: 0;
            right: 0;
            height: 2px;
            background-color: #eee;
            z-index: 1;
        }
        
        .progress-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            z-index: 2;
        }
        
        .step-number {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #eee;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 5px;
            font-weight: bold;
        }
        
        .step-name {
            font-size: 12px;
            text-align: center;
        }
        
        .active .step-number {
            background-color: #2c80ff;
            color: white;
        }
        
        .form-section {
            display: none;
        }
        
        .form-section.active {
            display: block;
        }
        
        .nav-buttons {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }
        
        .nav-btn {
            background-color: #f1f1f1;
            border: none;
            border-radius: 4px;
            padding: 10px 15px;
            font-size: 14px;
            cursor: pointer;
        }
        
        .nav-btn.next {
            background-color: #2c80ff;
            color: white;
        }
        
        .example-text {
            font-size: 12px;
            color: #888;
            margin-top: 3px;
        }
    </style>
</head>
<body>
    <div class="form-container">
        <h1>现病史记录表单</h1>
        <p style="text-align: center; margin-bottom: 15px; color: #666;">带★为必填项，可点击展开填写详情</p>
        
        <!-- 进度条 -->
        <div class="progress-bar">
            <div class="progress-step active">
                <div class="step-number">1</div>
                <div class="step-name">起病情况</div>
            </div>
            <div class="progress-step">
                <div class="step-number">2</div>
                <div class="step-name">症状特征</div>
            </div>
            <div class="progress-step">
                <div class="step-number">3</div>
                <div class="step-name">伴随症状</div>
            </div>
            <div class="progress-step">
                <div class="step-number">4</div>
                <div class="step-name">加重缓解</div>
            </div>
            <div class="progress-step">
                <div class="step-number">5</div>
                <div class="step-name">诊疗经过</div>
            </div>
            <div class="progress-step">
                <div class="step-number">6</div>
                <div class="step-name">疾病演变</div>
            </div>
            <div class="progress-step">
                <div class="step-number">7</div>
                <div class="step-name">一般情况</div>
            </div>
            <div class="progress-step">
                <div class="step-number">8</div>
                <div class="step-name">阴性病史</div>
            </div>
            <div class="progress-step">
                <div class="step-number">9</div>
                <div class="step-name">就诊原因</div>
            </div>
        </div>
        
        <!-- 表单部分 -->
        <form id="medical-history-form">
            <!-- 1. 起病情况 -->
            <div class="form-section active" id="section-1">
                <h2 class="required">1. 起病情况（S - Onset）</h2>
                
                <div class="form-group">
                    <label for="onset-time">起病具体时间</label>
                    <input type="datetime-local" id="onset-time" required>
                </div>
                
                <div class="form-group">
                    <label>起病地点</label>
                    <div class="checkbox-group">
                        <div class="checkbox-item">
                            <input type="radio" id="location-home" name="onset-location" value="家中">
                            <label for="location-home">家中</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="radio" id="location-work" name="onset-location" value="工作场所">
                            <label for="location-work">工作场所</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="radio" id="location-outdoor" name="onset-location" value="户外">
                            <label for="location-outdoor">户外</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="radio" id="location-other" name="onset-location" value="其他">
                            <label for="location-other">其他</label>
                            <input type="text" id="location-other-text" class="inline-input" style="display:none; width:150px;">
                        </div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label>起病形式</label>
                    <div class="radio-group">
                        <div class="radio-item">
                            <input type="radio" id="onset-acute" name="onset-type" value="急性">
                            <label for="onset-acute">急性（数分钟至数小时）</label>
                        </div>
                        <div class="radio-item">
                            <input type="radio" id="onset-subacute" name="onset-type" value="亚急性">
                            <label for="onset-subacute">亚急性（数天）</label>
                        </div>
                        <div class="radio-item">
                            <input type="radio" id="onset-chronic" name="onset-type" value="慢性">
                            <label for="onset-chronic">慢性（数周及以上）</label>
                        </div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="onset-cause">可能诱因</label>
                    <input type="text" id="onset-cause" placeholder="如：受凉后、进食油腻食物后、情绪激动后、无明显诱因">
                </div>
                
                <div class="nav-buttons">
                    <button type="button" class="nav-btn next" onclick="showSection(2)">下一步</button>
                </div>
            </div>
            
            <!-- 2. 主要症状特征 -->
            <div class="form-section" id="section-2">
                <h2 class="required">2. 主要症状特征（O - Manifestations）</h2>
                <p>针对主诉症状详细描述，可添加多个症状</p>
                
                <div id="symptoms-container">
                    <div class="symptom-item">
                        <div class="form-group">
                            <label for="symptom-1">症状</label>
                            <input type="text" id="symptom-1" placeholder="如：腹痛、咳嗽">
                        </div>
                        
                        <div class="form-group">
                            <label for="location-1">部位</label>
                            <input type="text" id="location-1" placeholder="如：上腹部、右侧胸部">
                        </div>
                        
                        <div class="form-group">
                            <label for="nature-1">性质</label>
                            <input type="text" id="nature-1" placeholder="如：绞痛、干咳、烧灼样">
                        </div>
                        
                        <div class="form-group">
                            <label>程度</label>
                            <div class="radio-group">
                                <div class="radio-item">
                                    <input type="radio" id="severity-1-mild" name="severity-1" value="轻微">
                                    <label for="severity-1-mild">轻微（不影响日常）</label>
                                </div>
                                <div class="radio-item">
                                    <input type="radio" id="severity-1-moderate" name="severity-1" value="中度">
                                    <label for="severity-1-moderate">中度（影响部分活动）</label>
                                </div>
                                <div class="radio-item">
                                    <input type="radio" id="severity-1-severe" name="severity-1" value="重度">
                                    <label for="severity-1-severe">重度（无法活动）</label>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label>频率</label>
                            <div class="radio-group">
                                <div class="radio-item">
                                    <input type="radio" id="frequency-1-continuous" name="frequency-1" value="持续存在">
                                    <label for="frequency-1-continuous">持续存在</label>
                                </div>
                                <div class="radio-item">
                                    <input type="radio" id="frequency-1-intermittent" name="frequency-1" value="间歇发作">
                                    <label for="frequency-1-intermittent">间歇发作</label>
                                    <input type="text" id="frequency-detail-1" class="inline-input" placeholder="每____小时/天发作____次" style="display:none; width:180px;">
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="duration-1">持续时间</label>
                            <input type="text" id="duration-1" placeholder="如：每次发作约30分钟、持续2天未缓解">
                        </div>
                    </div>
                </div>
                
                <button type="button" class="add-btn" id="add-symptom">添加其他症状</button>
                
                <div class="nav-buttons">
                    <button type="button" class="nav-btn" onclick="showSection(1)">上一步</button>
                    <button type="button" class="nav-btn next" onclick="showSection(3)">下一步</button>
                </div>
            </div>
            
            <!-- 3. 伴随症状 -->
            <div class="form-section" id="section-3">
                <h2>3. 伴随症状（A - Accompanying Symptoms）</h2>
                <p>勾选或填写与主诉同时出现的症状，阴性症状也需记录</p>
                
                <div class="form-group">
                    <div class="checkbox-group">
                        <div class="checkbox-item">
                            <input type="checkbox" id="fever" name="accompanying-symptoms">
                            <label for="fever">发热</label>
                            <input type="text" id="fever-temp" class="inline-input" placeholder="体温____℃" style="display:none; width:100px;">
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="chills" name="accompanying-symptoms" value="寒战">
                            <label for="chills">寒战</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="nausea" name="accompanying-symptoms">
                            <label for="nausea">恶心/呕吐</label>
                            <input type="text" id="vomit-detail" class="inline-input" placeholder="呕吐物性质____" style="display:none; width:130px;">
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="diarrhea" name="accompanying-symptoms">
                            <label for="diarrhea">腹泻/便秘</label>
                            <input type="text" id="stool-detail" class="inline-input" placeholder="次数____，性状____" style="display:none; width:140px;">
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="rash" name="accompanying-symptoms" value="皮疹">
                            <label for="rash">皮疹</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="dizziness" name="accompanying-symptoms" value="头晕/头痛">
                            <label for="dizziness">头晕/头痛</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="dyspnea" name="accompanying-symptoms" value="呼吸困难">
                            <label for="dyspnea">呼吸困难</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="palpitation" name="accompanying-symptoms" value="心悸">
                            <label for="palpitation">心悸</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="urinary" name="accompanying-symptoms" value="尿频/尿急/尿痛">
                            <label for="urinary">尿频/尿急/尿痛</label>
                        </div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="other-symptoms">其他</label>
                    <input type="text" id="other-symptoms" placeholder="如：无胸痛、无关节肿痛">
                </div>
                
                <div class="nav-buttons">
                    <button type="button" class="nav-btn" onclick="showSection(2)">上一步</button>
                    <button type="button" class="nav-btn next" onclick="showSection(4)">下一步</button>
                </div>
            </div>
            
            <!-- 4. 加重与缓解因素 -->
            <div class="form-section" id="section-4">
                <h2>4. 加重与缓解因素（P - Provoking/Palliative Factors）</h2>
                
                <div class="form-group">
                    <label for="aggravating-factors">加重因素</label>
                    <input type="text" id="aggravating-factors" placeholder="如：活动后加重、进食后加重、按压时疼痛加剧">
                </div>
                
                <div class="form-group">
                    <label for="relieving-factors">缓解因素</label>
                    <input type="text" id="relieving-factors" placeholder="如：休息后减轻、屈膝位缓解、服用XX药物后缓解">
                </div>
                
                <div class="nav-buttons">
                    <button type="button" class="nav-btn" onclick="showSection(3)">上一步</button>
                    <button type="button" class="nav-btn next" onclick="showSection(5)">下一步</button>
                </div>
            </div>
            
            <!-- 5. 诊疗经过 -->
            <div class="form-section" id="section-5">
                <h2>5. 诊疗经过（C - Course & Care）</h2>
                
                <div class="form-group">
                    <label>院外就诊情况</label>
                    <div class="radio-group">
                        <div class="radio-item">
                            <input type="radio" id="no-visit" name="visit-status" value="未就诊">
                            <label for="no-visit">未就诊</label>
                        </div>
                        <div class="radio-item">
                            <input type="radio" id="visited" name="visit-status" value="曾就诊">
                            <label for="visited">曾就诊于</label>
                            <input type="text" id="hospital-name" class="inline-input" placeholder="____医院" style="display:none; width:120px;">
                            <input type="date" id="visit-date" class="inline-input" style="display:none;">
                        </div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="outside-diagnosis">院外诊断</label>
                    <input type="text" id="outside-diagnosis" placeholder="如：急性胃炎、上呼吸道感染">
                </div>
                
                <div class="form-group">
                    <label for="examination-results">检查项目及结果</label>
                    <textarea id="examination-results" rows="3" placeholder="如：血常规示白细胞升高、胸片未见异常"></textarea>
                </div>
                
                <div class="form-group">
                    <label for="treatment">用药/疗法</label>
                    <textarea id="treatment" rows="3" placeholder="药名，剂量____，用法____，疗程____天，效果：□有效 □无效 □加重"></textarea>
                </div>
                
                <div class="nav-buttons">
                    <button type="button" class="nav-btn" onclick="showSection(4)">上一步</button>
                    <button type="button" class="nav-btn next" onclick="showSection(6)">下一步</button>
                </div>
            </div>
            
            <!-- 6. 疾病演变 -->
            <div class="form-section" id="section-6">
                <h2 class="required">6. 疾病演变（H - History of Progression）</h2>
                
                <div class="form-group">
                    <div class="radio-group">
                        <div class="radio-item">
                            <input type="radio" id="progression-constant" name="progression" value="症状持续存在，无明显变化">
                            <label for="progression-constant">症状持续存在，无明显变化</label>
                        </div>
                        <div class="radio-item">
                            <input type="radio" id="progression-intermittent" name="progression" value="间歇发作">
                            <label for="progression-intermittent">间歇发作，发作频率/程度</label>
                            <select id="frequency-change" class="inline-input" style="display:none;">
                                <option value="增加">增加</option>
                                <option value="减少">减少</option>
                                <option value="不变">不变</option>
                            </select>
                        </div>
                        <div class="radio-item">
                            <input type="radio" id="progression-worsening" name="progression" value="进行性加重">
                            <label for="progression-worsening">进行性加重（如：疼痛范围扩大、咳嗽加重伴咳痰）</label>
                        </div>
                        <div class="radio-item">
                            <input type="radio" id="progression-improving" name="progression" value="逐渐缓解">
                            <label for="progression-improving">逐渐缓解（如：体温逐步下降、腹痛减轻）</label>
                        </div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="progression-details">具体变化过程</label>
                    <textarea id="progression-details" rows="3"></textarea>
                </div>
                
                <div class="nav-buttons">
                    <button type="button" class="nav-btn" onclick="showSection(5)">上一步</button>
                    <button type="button" class="nav-btn next" onclick="showSection(7)">下一步</button>
                </div>
            </div>
            
            <!-- 7. 一般情况 -->
            <div class="form-section" id="section-7">
                <h2 class="required">7. 一般情况（A - General Condition）</h2>
                
                <div class="form-group">
                    <label>精神状态</label>
                    <div class="radio-group">
                        <div class="radio-item">
                            <input type="radio" id="mental-good" name="mental-state" value="良好">
                            <label for="mental-good">良好</label>
                        </div>
                        <div class="radio-item">
                            <input type="radio" id="mental-depressed" name="mental-state" value="萎靡">
                            <label for="mental-depressed">萎靡</label>
                        </div>
                        <div class="radio-item">
                            <input type="radio" id="mental-irritable" name="mental-state" value="烦躁">
                            <label for="mental-irritable">烦躁</label>
                        </div>
                        <div class="radio-item">
                            <input type="radio" id="mental-drowsy" name="mental-state" value="嗜睡">
                            <label for="mental-drowsy">嗜睡</label>
                        </div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label>食欲</label>
                    <div class="radio-group">
                        <div class="radio-item">
                            <input type="radio" id="appetite-normal" name="appetite" value="正常">
                            <label for="appetite-normal">正常</label>
                        </div>
                        <div class="radio-item">
                            <input type="radio" id="appetite-decreased" name="appetite" value="减退">
                            <label for="appetite-decreased">减退</label>
                        </div>
                        <div class="radio-item">
                            <input type="radio" id="appetite-refused" name="appetite" value="拒食">
                            <label for="appetite-refused">拒食</label>
                        </div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label>睡眠</label>
                    <div class="radio-group">
                        <div class="radio-item">
                            <input type="radio" id="sleep-normal" name="sleep" value="正常">
                            <label for="sleep-normal">正常</label>
                        </div>
                        <div class="radio-item">
                            <input type="radio" id="sleep-difficulty" name="sleep" value="入睡困难">
                            <label for="sleep-difficulty">入睡困难</label>
                        </div>
                        <div class="radio-item">
                            <input type="radio" id="sleep-wakeful" name="sleep" value="易醒">
                            <label for="sleep-wakeful">易醒</label>
                        </div>
                        <div class="radio-item">
                            <input type="radio" id="sleep-insomnia" name="sleep" value="失眠">
                            <label for="sleep-insomnia">失眠</label>
                        </div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label>体重</label>
                    <div class="radio-group">
                        <div class="radio-item">
                            <input type="radio" id="weight-stable" name="weight" value="无明显变化">
                            <label for="weight-stable">无明显变化</label>
                        </div>
                        <div class="radio-item">
                            <input type="radio" id="weight-loss" name="weight" value="减轻">
                            <label for="weight-loss">减轻</label>
                            <input type="number" id="weight-loss-amount" class="inline-input" placeholder="____kg" style="display:none; width:80px;">
                            <span style="display:none;">（近</span>
                            <input type="text" id="weight-loss-period" class="inline-input" placeholder="____时间" style="display:none; width:100px;">
                            <span style="display:none;">）</span>
                        </div>
                        <div class="radio-item">
                            <input type="radio" id="weight-gain" name="weight" value="增加">
                            <label for="weight-gain">增加</label>
                            <input type="number" id="weight-gain-amount" class="inline-input" placeholder="____kg" style="display:none; width:80px;">
                            <span style="display:none;">（近</span>
                            <input type="text" id="weight-gain-period" class="inline-input" placeholder="____时间" style="display:none; width:100px;">
                            <span style="display:none;">）</span>
                        </div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label>大小便</label>
                    <div class="radio-group">
                        <div class="radio-item">
                            <input type="radio" id="excretion-normal" name="excretion" value="正常">
                            <label for="excretion-normal">正常</label>
                        </div>
                        <div class="radio-item">
                            <input type="radio" id="excretion-abnormal" name="excretion" value="异常">
                            <label for="excretion-abnormal">异常</label>
                            <input type="text" id="excretion-detail" class="inline-input" placeholder="描述：____" style="display:none; width:150px;">
                        </div>
                    </div>
                </div>
                
                <div class="nav-buttons">
                    <button type="button" class="nav-btn" onclick="showSection(6)">上一步</button>
                    <button type="button" class="nav-btn next" onclick="showSection(8)">下一步</button>
                </div>
            </div>
            
            <!-- 8. 有鉴别意义的阴性病史 -->
            <div class="form-section" id="section-8">
                <h2>8. 有鉴别意义的阴性病史（I - Important Negative History）</h2>
                <p>记录与疑似诊断相关但未出现的关键症状</p>
                
                <div class="form-group">
                    <textarea id="negative-history" rows="4" placeholder="如：胸痛无后背放射、头痛无喷射性呕吐、关节痛无红肿"></textarea>
                </div>
                
                <div class="nav-buttons">
                    <button type="button" class="nav-btn" onclick="showSection(7)">上一步</button>
                    <button type="button" class="nav-btn next" onclick="showSection(9)">下一步</button>
                </div>
            </div>
            
            <!-- 9. 就诊原因 -->
            <div class="form-section" id="section-9">
                <h2 class="required">9. 就诊原因（N - Reason for Encounter）</h2>
                
                <div class="form-group">
                    <div class="checkbox-group">
                        <div class="checkbox-item">
                            <input type="checkbox" id="reason-worsening" name="reason" value="症状突然加重">
                            <label for="reason-worsening">症状突然加重</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="reason-new-symptom" name="reason">
                            <label for="reason-new-symptom">出现新症状</label>
                            <input type="text" id="new-symptom-detail" class="inline-input" placeholder="____" style="display:none; width:120px;">
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="reason-treatment-failed" name="reason" value="院外治疗效果不佳">
                            <label for="reason-treatment-failed">院外治疗效果不佳</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="reason-followup" name="reason" value="例行复查">
                            <label for="reason-followup">例行复查</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="reason-other" name="reason">
                            <label for="reason-other">其他</label>
                            <input type="text" id="reason-other-detail" class="inline-input" placeholder="____" style="display:none; width:120px;">
                        </div>
                    </div>
                </div>
                
                <div class="form-group">
                    <div class="checkbox-item">
                        <input type="checkbox" id="confirm-info" required>
                        <label for="confirm-info" class="required">确认信息无误，提交记录</label>
                    </div>
                </div>
                
                <div class="nav-buttons">
                    <button type="button" class="nav-btn" onclick="showSection(8)">上一步</button>
                    <button type="submit" class="submit-btn">提交记录</button>
                </div>
            </div>
        </form>
    </div>

    <script>
        // 当前显示的section
        let currentSection = 1;
        
        // 显示指定section
        function showSection(sectionNumber) {
            // 隐藏当前section
            document.getElementById(`section-${currentSection}`).classList.remove('active');
            
            // 更新进度条
            document.querySelectorAll('.progress-step')[currentSection-1].classList.remove('active');
            
            // 显示新section
            document.getElementById(`section-${sectionNumber}`).classList.add('active');
            document.querySelectorAll('.progress-step')[sectionNumber-1].classList.add('active');
            
            // 更新当前section
            currentSection = sectionNumber;
        }
        
        // 动态添加症状
        let symptomCount = 1;
        document.getElementById('add-symptom').addEventListener('click', function() {
            symptomCount++;
            const symptomsContainer = document.getElementById('symptoms-container');
            const newSymptom = document.createElement('div');
            newSymptom.className = 'symptom-item';
            newSymptom.innerHTML = `
                <button type="button" class="remove-btn" onclick="this.parentElement.remove()">删除</button>
                <div class="form-group">
                    <label for="symptom-${symptomCount}">症状</label>
                    <input type="text" id="symptom-${symptomCount}" placeholder="如：腹痛、咳嗽">
                </div>
                
                <div class="form-group">
                    <label for="location-${symptomCount}">部位</label>
                    <input type="text" id="location-${symptomCount}" placeholder="如：上腹部、右侧胸部">
                </div>
                
                <div class="form-group">
                    <label for="nature-${symptomCount}">性质</label>
                    <input type="text" id="nature-${symptomCount}" placeholder="如：绞痛、干咳、烧灼样">
                </div>
                
                <div class="form-group">
                    <label>程度</label>
                    <div class="radio-group">
                        <div class="radio-item">
                            <input type="radio" id="severity-${symptomCount}-mild" name="severity-${symptomCount}" value="轻微">
                            <label for="severity-${symptomCount}-mild">轻微（不影响日常）</label>
                        </div>
                        <div class="radio-item">
                            <input type="radio" id="severity-${symptomCount}-moderate" name="severity-${symptomCount}" value="中度">
                            <label for="severity-${symptomCount}-moderate">中度（影响部分活动）</label>
                        </div>
                        <div class="radio-item">
                            <input type="radio" id="severity-${symptomCount}-severe" name="severity-${symptomCount}" value="重度">
                            <label for="severity-${symptomCount}-severe">重度（无法活动）</label>
                        </div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label>频率</label>
                    <div class="radio-group">
                        <div class="radio-item">
                            <input type="radio" id="frequency-${symptomCount}-continuous" name="frequency-${symptomCount}" value="持续存在">
                            <label for="frequency-${symptomCount}-continuous">持续存在</label>
                        </div>
                        <div class="radio-item">
                            <input type="radio" id="frequency-${symptomCount}-intermittent" name="frequency-${symptomCount}" value="间歇发作">
                            <label for="frequency-${symptomCount}-intermittent">间歇发作</label>
                            <input type="text" id="frequency-detail-${symptomCount}" class="inline-input" placeholder="每____小时/天发作____次" style="display:none; width:180px;">
                        </div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="duration-${symptomCount}">持续时间</label>
                    <input type="text" id="duration-${symptomCount}" placeholder="如：每次发作约30分钟、持续2天未缓解">
                </div>
            `;
            symptomsContainer.appendChild(newSymptom);
            
            // 添加频率选项的事件监听
            const intermittentRadio = document.getElementById(`frequency-${symptomCount}-intermittent`);
            const frequencyDetail = document.getElementById(`frequency-detail-${symptomCount}`);
            
            intermittentRadio.addEventListener('change', function() {
                if (this.checked) {
                    frequencyDetail.style.display = 'inline-block';
                }
            });
            
            const continuousRadio = document.getElementById(`frequency-${symptomCount}-continuous`);
            continuousRadio.addEventListener('change', function() {
                if (this.checked) {
                    frequencyDetail.style.display = 'none';
                }
            });
        });
        
        // 动态显示/隐藏输入框
        document.addEventListener('DOMContentLoaded', function() {
            // 起病地点 - 其他
            document.getElementById('location-other').addEventListener('change', function() {
                document.getElementById('location-other-text').style.display = this.checked ? 'inline-block' : 'none';
            });
            
            // 症状频率 - 间歇发作
            document.getElementById('frequency-1-intermittent').addEventListener('change', function() {
                document.getElementById('frequency-detail-1').style.display = this.checked ? 'inline-block' : 'none';
            });
            
            document.getElementById('frequency-1-continuous').addEventListener('change', function() {
                document.getElementById('frequency-detail-1').style.display = this.checked ? 'none' : 'inline-block';
            });
            
            // 伴随症状 - 发热
            document.getElementById('fever').addEventListener('change', function() {
                document.getElementById('fever-temp').style.display = this.checked ? 'inline-block' : 'none';
            });
            
            // 伴随症状 - 恶心/呕吐
            document.getElementById('nausea').addEventListener('change', function() {
                document.getElementById('vomit-detail').style.display = this.checked ? 'inline-block' : 'none';
            });
            
            // 伴随症状 - 腹泻/便秘
            document.getElementById('diarrhea').addEventListener('change', function() {
                document.getElementById('stool-detail').style.display = this.checked ? 'inline-block' : 'none';
            });
            
            // 院外就诊情况
            document.getElementById('visited').addEventListener('change', function() {
                document.getElementById('hospital-name').style.display = this.checked ? 'inline-block' : 'none';
                document.getElementById('visit-date').style.display = this.checked ? 'inline-block' : 'none';
            });
            
            document.getElementById('no-visit').addEventListener('change', function() {
                document.getElementById('hospital-name').style.display = this.checked ? 'none' : 'inline-block';
                document.getElementById('visit-date').style.display = this.checked ? 'none' : 'inline-block';
            });
            
            // 疾病演变 - 间歇发作
            document.getElementById('progression-intermittent').addEventListener('change', function() {
                document.getElementById('frequency-change').style.display = this.checked ? 'inline-block' : 'none';
            });
            
            // 体重变化
            document.getElementById('weight-loss').addEventListener('change', function() {
                const display = this.checked ? 'inline-block' : 'none';
                document.getElementById('weight-loss-amount').style.display = display;
                document.getElementById('weight-loss-period').style.display = display;
                document.querySelectorAll('#weight-loss ~ span').forEach(el => {
                    el.style.display = display;
                });
            });
            
            document.getElementById('weight-gain').addEventListener('change', function() {
                const display = this.checked ? 'inline-block' : 'none';
                document.getElementById('weight-gain-amount').style.display = display;
                document.getElementById('weight-gain-period').style.display = display;
                document.querySelectorAll('#weight-gain ~ span').forEach(el => {
                    el.style.display = display;
                });
            });
            
            document.getElementById('weight-stable').addEventListener('change', function() {
                if (this.checked) {
                    document.getElementById('weight-loss-amount').style.display = 'none';
                    document.getElementById('weight-loss-period').style.display = 'none';
                    document.getElementById('weight-gain-amount').style.display = 'none';
                    document.getElementById('weight-gain-period').style.display = 'none';
                    document.querySelectorAll('#weight-loss ~ span, #weight-gain ~ span').forEach(el => {
                        el.style.display = 'none';
                    });
                }
            });
            
            // 大小便异常
            document.getElementById('excretion-abnormal').addEventListener('change', function() {
                document.getElementById('excretion-detail').style.display = this.checked ? 'inline-block' : 'none';
            });
            
            document.getElementById('excretion-normal').addEventListener('change', function() {
                document.getElementById('excretion-detail').style.display = this.checked ? 'none' : 'inline-block';
            });
            
            // 就诊原因 - 新症状
            document.getElementById('reason-new-symptom').addEventListener('change', function() {
                document.getElementById('new-symptom-detail').style.display = this.checked ? 'inline-block' : 'none';
            });
            
            // 就诊原因 - 其他
            document.getElementById('reason-other').addEventListener('change', function() {
                document.getElementById('reason-other-detail').style.display = this.checked ? 'inline-block' : 'none';
            });
        });
        
        // 表单提交
        document.getElementById('medical-history-form').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('表单提交成功！');
            // 在实际应用中，这里应该发送数据到服务器
        });
    </script>
</body>
</html>